<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-11-02 16:27:27
 * @LastEditTime: 2023-11-29 14:23:21
 * @LastEditors: huangshuai 
-->
<template>
  <div class="notice">
    <el-table :data="tableData" style="width: 95%" border stripe>
      <el-table-column prop="content" label="公告内容" align="center" />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="220"
        align="center"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="220"
        align="center"
      />
      <el-table-column align="center" width="200">
        <template #header>
          <el-button @click="showAddDialog">录入</el-button>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 95%; margin-top: 10px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>

  <AddDialog ref="addDialogRef" @getData="getData" />
  <EditDialog ref="editDialogRef" @getData="getData" />
</template>

<script setup lang="ts">
import { listNoticeInfo, deleteNotice } from "@/api/super";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import AddDialog from "./add-dialog.vue";
import EditDialog from "./edit-dialog.vue";

const tableData = ref<any>([]);
onMounted(() => {
  getData();
});
const addDialogRef = ref();
const editDialogRef = ref();
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const handleSizeChange = () => {
  getData();
};
const handleCurrentChange = () => {
  getData();
};
const getData = async () => {
  await listNoticeInfo(currentPage.value, pageSize.value).then((res: any) => {
    tableData.value = res.data;
    total.value = +res.total;
  });
};
const handleEdit = (data: any) => {
  editDialogRef.value.showDialog(data);
};
const handleDelete = async (id: any) => {
  await deleteNotice(id).then((res: any) => [
    ElMessage({
      message: res.message,
      type: "success",
    }),
  ]);
};
const showAddDialog = () => {
  addDialogRef.value.showDialog();
};
</script>

<style scoped lang="less">
.notice {
  width: 100%;
  // height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
